<template>
	<cl-page statusBarBackground="#0C81F7" background-color="#f1f1f1" :fullscreen="true">
		<view class="page-wallet animate__animated animate__fadeIn">
			<Header tit="MAKE A TRANSFER" :title="t('wallet.title')"></Header>
			<view class="phone" v-if="!pay">
				<view class="input flex align-center">
					<!-- <cl-icon name="phone" size="40rpx" color="#AAAAAA"></cl-icon> -->
					<image
						class="icon"
						src="/static/images/iconphone.png"
						mode="aspectFill"
					></image>
					<cl-input
						clearable
						background-color="#EEEEEE"
						:border="false"
						:placeholder="t('wallet.phonep')"
						maxlength="11"
						v-model="phone"
						disabled
					/>
				</view>
			</view>
			<view
				class="tip flex align-center"
				v-if="phone.length == 11 && !pay"
				@click="show = true"
			>
				<view v-if="cache.lang == 'zh'">
					<cl-icon class="mr30" name="relay-fill" size="40rpx" color="#AAAAAA"></cl-icon>
					给 {{ phone }} 转账
				</view>
				<view v-else>
					<cl-icon class="mr30" name="relay-fill" size="40rpx" color="#AAAAAA"></cl-icon>
					Transfer money to {{ phone }}
				</view>
			</view>
			<view class="pay" v-if="pay">
				<image class="avatar" src="/static/images/avatar.jpg" mode="aspectFill"></image>
				<view class="name">{{ cache.lang == "zh" ? "用户" : "User" }}</view>
				<view class="phone">185****3321</view>
				<view class="money flex align-end">
					￥
					<div :class="money ? 'val val_' : 'val'">
						{{ money ? money : $t("wallet.money") }}
					</div>
				</view>
				<cl-input
					class="input"
					clearable
					:placeholder="t('wallet.text')"
					maxlength="50"
					:border="false"
				/>
				<view :class="money ? 'btn' : 'btn btn_'" @click="paypass">{{
					$t("wallet.ok")
				}}</view>
			</view>
			<view class="flex flex-between align-center pirce" v-if="pay">
				<view>{{ $t("wallet.ye") }}：500,000.00</view>
				<view>{{ $t("wallet.xe") }}:150,000,000.00</view>
			</view>
			<keyboard
				:title="t('wallet.title')"
				:show="true"
				:pass="keyboardpass"
				@close="close"
				@finsh="finsh"
				@del="del"
				@input="input"
			></keyboard>
			<view class="shade flex flex-center animate__animated animate__fadeIn" v-if="show">
				<view class="info animate__animated animate__bounceIn">
					<image class="avatar" src="/static/images/avatar.jpg" mode="aspectFill"></image>
					<view class="phoneNum">{{ phone }}</view>
					<view v-if="cache.lang == 'zh'" class="text flex flex-center"
						>确定给<view class="font"> （**嫣） </view>转账？</view
					>
					<view v-else class="text flex flex-center"
						>Are you sure to transfer money to （User）
					</view>
					<view class="flex align-center flex-between">
						<view class="close" @click="show = false">{{ $t("wallet.canal") }}</view>
						<view class="confirm" @click="topay">{{ $t("wallet.confirm") }}</view>
					</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { computed, reactive, ref } from "vue";
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
import keyboard from "@/components/keyboard.vue";
import Header from "/@/components/header.vue";
const { locale } = useI18n();
const { t } = useI18n();
const { service, router, refs, setRefs, storage, upload } = useCool();
const { cache } = useStore();
const app = useApp();
const ui = useUi();
const phone = ref("");
const money = ref("");
const show = ref(false);
const pay = ref(false);
const keyboardpass = ref(false);
const change = (e: any) => {};

const stopdefault = (e: any) => {
	e.stopPropagation();
	// document.activeElement.blur()
};

const input = (e: any) => {
	if (pay.value) {
		if (money.value.length == 7) {
			return;
		}
		money.value = money.value + "" + e;
	} else {
		if (phone.value.length == 11) {
			return;
		}
		phone.value = phone.value + "" + e;
	}
};

const del = (e: any) => {
	if (pay.value) {
		if (money.value.length == 0) {
			return;
		}
		money.value = money.value.slice(0, -1);
	} else {
		if (phone.value.length == 0) {
			return;
		}
		phone.value = phone.value.slice(0, -1);
	}
};

const finsh = (e: any) => {
	phone.value = "";
	money.value = "";
	show.value = false;
	pay.value = false;
	keyboardpass.value = false;
	router.push("/pages/user/wallet/success");
};

const close = (e: any) => {
	keyboardpass.value = false;
};

const topay = () => {
	show.value = false;
	pay.value = true;
};

const paypass = () => {
	if (!money.value) {
		return;
	}
	keyboardpass.value = true;
};
</script>

<style lang="scss" scoped>
.page-wallet {
	padding-bottom: 650rpx;
	.phone {
		width: 100%;
		padding: 30rpx;
		background: #ffffff;
		box-sizing: border-box;

		.input {
			width: 100%;
			height: 72rpx;
			background: #eeeeee;
			border-radius: 20rpx;
			padding-left: 20rpx;
		}
		.icon {
			height: 32rpx;
			width: 24rpx;
		}
	}

	:deep(.uni-input-input) {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 32rpx;
	}

	.tip {
		width: 100%;
		height: 100rpx;
		background: #ffffff;
		padding: 0 44rpx;
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 32rpx;
		color: #333333;
		border-top: 1rpx solid #eeeeee;
	}
	.shade {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba($color: #000000, $alpha: 0.4);
		z-index: 1000;
		.info {
			width: 580rpx;
			background: #ffffff;
			border-radius: 20rpx;
			padding: 50rpx 40rpx 40rpx 40rpx;
			box-sizing: border-box;
			.avatar {
				width: 120rpx;
				height: 120rpx;
				display: block;
				margin: 0 auto;
				border-radius: 50%;
			}
			.phoneNum {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 40rpx;
				color: #333333;
				margin-top: 30rpx;
				text-align: center;
			}
			.text {
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 40rpx;
				color: #333333;
				.font {
					color: #0c81f7;
				}
				margin-bottom: 40rpx;
			}
			.close {
				width: 230rpx;
				height: 88rpx;
				background: #eeeeee;
				border-radius: 20rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #666666;
				line-height: 88rpx;
				text-align: center;
			}
			.confirm {
				width: 230rpx;
				height: 88rpx;
				background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
				border-radius: 20rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 38rpx;
				color: #ffffff;
				line-height: 88rpx;
				text-align: center;
			}
		}
	}
	.pay {
		width: calc(100% - 60rpx);
		background: #ffffff;
		box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(170, 170, 170, 0.1);
		border-radius: 20rpx;
		position: relative;
		left: 30rpx;
		top: 100rpx;
		padding: 90rpx 30rpx 30rpx 30rpx;
		box-sizing: border-box;
		.avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			left: 50%;
			margin-left: -60rpx;
			top: -60rpx;
			position: absolute;
		}
		.name {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
		}
		.phone {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999;
			text-align: center;
			padding: 0;
			margin-top: 10rpx;
		}
		.money {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 40rpx;
			color: #333333;
			margin-right: 16rpx;
			line-height: 70rpx;
			margin-top: 50rpx;
			.val {
				flex: 1;
				border-bottom: 1rpx solid #dddddd;
				padding-bottom: 10rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 56rpx;
				color: #dddddd;
				text-align: left;
			}
			.val_ {
				color: #333333;
				font-size: 70rpx;
			}
		}
		.input {
			margin-top: 20rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			text-indent: 20rpx;
		}
		.btn {
			width: 100%;
			height: 88rpx;
			background: linear-gradient(0deg, #0c81f7 0%, #44a1ff 100%);
			border-radius: 20rpx;
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 38rpx;
			color: #ffffff;
			line-height: 88rpx;
			text-align: center;
			margin-top: 30rpx;
		}
		.btn_ {
			background: #eeeeee;
			color: #dddddd;
		}
	}
	.pirce {
		font-family: PingFangSC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666666;
		margin-top: 130rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
}
</style>
